<template>
  <div class="my-page">
    <TopHeader />
    <BottomNavigation />
    <div
      class="user-info-card"
      :class="{ clickable: !userStore.userInfo }"
      @click="handleUserCardClick"
    >
      <div class="avatar">
        <el-icon><UserFilled /></el-icon>
      </div>
      <div class="user-name">{{ userStore.userInfo?.userName || '未登录' }}</div>
    </div>
    <div class="action-list">
      <el-button type="primary" size="large" class="action-btn" @click="goToAppointments">
        <el-icon class="action-icon"><Calendar /></el-icon>
        我的预约
      </el-button>
      <el-button type="info" size="large" class="action-btn" @click="goToProfile">
        <el-icon class="action-icon"><User /></el-icon>
        就诊人
      </el-button>
      <el-button type="success" size="large" class="action-btn" @click="showKefu = true">
        <el-icon class="action-icon"><PhoneFilled /></el-icon>
        客服
      </el-button>
      <el-button v-if="userStore.userInfo" type="danger" size="large" class="action-btn" @click="logout">
        <el-icon class="action-icon"><SwitchButton /></el-icon>
        退出登录
      </el-button>
      <el-button v-else type="primary" size="large" class="action-btn" @click="goLogin">
        <el-icon class="action-icon"><UserFilled /></el-icon>
        去登录
      </el-button>
    </div>
    <el-dialog v-model="showKefu" title="客服电话" width="300px" center>
      <ul class="kefu-list">
        <li v-for="(phone, idx) in kefuPhones" :key="idx">
          <el-icon><PhoneFilled /></el-icon>
          <span>{{ phone }}</span>
        </li>
      </ul>
      <template #footer>
        <el-button @click="showKefu = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import TopHeader from '@/components/TopHeader.vue'
import BottomNavigation from '@/components/BottomNavigation.vue'
import { UserFilled, PhoneFilled, User, Calendar, SwitchButton } from '@element-plus/icons-vue'

const userStore = useUserStore()
const router = useRouter()
const showKefu = ref(false)
const kefuPhones = [
  '400-123-4567',
  '010-88888888',
  '021-66668888'
]

const goToAppointments = () => {
  router.push('/yonghu/my-appointments')
}

const goToProfile = () => {
  router.push('/yonghu/profile-info')
}

const handleUserCardClick = () => {
  if (!userStore.userInfo) {
    router.push('/login')
  }
}

const logout = () => {
  userStore.logout && userStore.logout();
  if (userStore.userInfo) userStore.userInfo = null;
  router.push('/login');
}

const goLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.my-page {
  padding: 15px;
  padding-top: 70px;
  padding-bottom: 70px;
  background: #f5f7fa;
  min-height: 100vh;
}
.user-info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(22,93,255,0.08);
  padding: 30px 0 20px 0;
  margin-bottom: 30px;
  transition: box-shadow 0.2s, border 0.2s;
}
.user-info-card.clickable {
  cursor: pointer;
  border: 2px dashed #409eff;
  box-shadow: 0 4px 16px rgba(64,158,255,0.12);
}
.avatar {
  width: 64px;
  height: 64px;
  background: #e6f0ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #165DFF;
  margin-bottom: 10px;
}
.user-name {
  font-size: 20px;
  font-weight: bold;
  color: #165DFF;
}
/* 关键调整：让 action-list 作为弹性容器，垂直排列，且让按钮占满宽度 */
.action-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
  /* 让内容在水平方向居中，也可以根据需求改，比如 justify-content: flex-start; */
  align-items: center; 
  width: 100%;
  /* 限制最大宽度，保证不同设备下不会太宽 */
  max-width: 400px; 
  margin-left: auto;
  margin-right: auto;
}
.action-btn {
  width: 100%;
  font-size: 18px;
  border-radius: 8px;
  padding: 16px 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.action-icon {
  margin-right: 8px;
  font-size: 20px;
  display: flex;
  align-items: center;
}
.kefu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.kefu-list li {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin-bottom: 12px;
  color: #165DFF;
}
.kefu-list li .el-icon {
  margin-right: 8px;
}
</style>